<template>
  <span style="font-weight: bold;">相对文件路径:{{ fileDir }}</span>
  <div class="m-4" style="margin-left: -240px;">
    <p style="color: blue;font-weight: bold;"> 产线/工位—选项</p>
    <el-cascader style="width: 200px;" v-model="value" :options="options" />
  </div>

  <div class="block" style="margin-top: -90px; margin-left: 240px;">
    <p style="color: blue;font-weight: bold;">日期选择器</p>
    <el-date-picker
      style="width: 200px;"
      v-model="dataValue"
      format="YYYY-MM-DD"
      value-format="YYYY-MM-DD"
      type="date"
      placeholder="选择日期"
      :shortcuts="shortcuts"
    />
  </div>
  
  <el-button style="width: 100px; margin: 20px;" type="primary">上一个</el-button>
  <el-button
    style="width: 100px; margin: 20px;"
    type="primary"
    @click="queryData"
  >
    查询
  </el-button>
  <el-button style="width: 100px; margin: 20px;" type="primary">下一个</el-button>
  <br />

  <!-- 选择csv文件 -->
  <el-upload
    class="upload-demo"
    accept=".csv"
    :http-request="uploadRequest"
    :show-file-list="false"
    drag
    @change="handleFileChange"
  >
    <template #trigger>
      <el-button style="font-size: 15px; font-weight: bold;" type="primary">
        选择csv文件
      </el-button>
    </template>
    <div style="margin-left: -300px" class="el-upload__tip">
      <b style="font-size: 15px;">注:只能上传csv文件</b>
    </div>
  </el-upload>

  <el-table 
    :data="tableData" 
    border 
    style="margin-top: 20px; max-height: 305px; overflow-y: auto;" height="305px"
  >
    <el-table-column prop="Position" label="Position" />
    <el-table-column prop="Force" label="Force" />
  </el-table>
</template>

<script lang="ts" setup>
import { useUpload } from '../../ts/useUpload';
import { useCsvStore } from '../../stores/csvStore';  // 引入 Pinia store
import { useCascaderOptions } from '../../ts/useCascaderOptions';
import { ElMessage } from 'element-plus';
import * as Papa from 'papaparse';


const { dataValue, shortcuts, value, options, fileDir, queryData } = useCascaderOptions();
const { tableData, uploadRequest } = useUpload();
const {csvData ,setCsvData } = useCsvStore();  // 使用 store 中的方法

const handleFileChange = (file) => {
  const reader = new FileReader();
  reader.onload = (e) => {
    // 获取文件内容并处理 CSV
    const csvContent = e.target.result as string;
    Papa.parse(csvContent,{
      header: true,
      skipEmptyLines: true,
      complete: (results) =>{
        setCsvData(results.data);
        ElMessage.success('CSV文件解析成功');
      },
        error: () => {
          ElMessage.error('CSV文件解析失败');
        },
    })
    
    // 使用 Pinia 更新 CSV 数据
    
  };
  reader.readAsText(file.raw);
};


</script>
